<template>
  <div class="list">
    <div class="box">
      <div class="header">
        <el-row>
          <el-col :span="12">
            <div class="box-title">
              共收藏企业数量
              <span class="number-of-enterpise">{{ numberOfEnterpise }}</span>
              个
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item right">
              <el-button type="primary" @click="handleSetUserStoreComp">
                取消收藏
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="condition">
        <div class="item">
          企业名称
          <el-input
            v-model="condition.company_name"
            placeholder="输入企业名称"
            class="condition-input"
          />
        </div>
        <div class="item">
          所在地区
          <el-cascader
            v-model="condition.province_code"
            clearable
            :options="regions"
            :props="{ value: 'id', label: 'cityname', checkStrictly: true }"
            @change="handleChange"
            placeholder="请选择地区"
          />
        </div>
        <div class="item">
          企业标签
          <el-select
            v-model="condition.econ_kind_code"
            clearable
            placeholder="请选择行业"
            class="condition-select"
          >
            <el-option
              v-for="(item, index) in industryList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div class="item">
          注册资本
          <input-number
            :suffix="true"
            v-model="condition.regist_capi"
            :min="1"
            :max="99999"
            suffixText="万元"
          />
        </div>
        <div class="item">
          注册日期
          <el-date-picker
            style="width: 200px"
            v-model="condition.start_date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="condition-input"
          >
          </el-date-picker>
        </div>
        <div class="item">
          <el-button
            type="primary"
            @click="subSearch"
          >
            <ali-icon icon="iconsousuo"></ali-icon>
            搜索
          </el-button>
          <el-button
            @click="resetCondition"
          >
            <ali-icon icon="iconzhongzhi"></ali-icon>
            重置
          </el-button>
        </div>
      </div>
    </div>
    <div class="list-view box">
      <el-table
        class="list-table"
        :data="tableData"
        @selection-change="handleSelectionChange"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="tel"
          label="电话"
          type="expand"
          class-name="phone-cell"
        >
          <template slot-scope="{ row }">
            <el-table :data="row.tel">
              <el-table-column label="姓名" prop="name"> </el-table-column>
              <el-table-column label="联系方式" prop="telephone" />
              <el-table-column label="呼叫">
                <template slot-scope="{ row }">
                  <span v-if="row.is_call">已呼叫</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column label="预约信息">
                <template slot-scope="{ row }">
                  <div @click="alertReservationDialogVisible(row)">
                    <ali-icon
                      icon="iconshizijiahao2"
                      style="font-size: 1rem; color: #22ac38"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="提示信息" prop="tips" />
              <el-table-column label="标记信息" prop="mark" />
              <el-table-column label="准确度" prop="accuracy" />
              <el-table-column label="来源" prop="source" />
              <el-table-column label="号码检测" prop="checked" />
              <el-table-column label="电话标签">
                <template slot-scope="{ row }">
                  <template v-if="row.marks">
                    <span>{{ row.marks }}</span>
                  </template>
                  <template v-else>
                    <div @click="alertPhoneDialogVisible(row)">
                      <ali-icon
                        icon="iconshizijiahao2"
                        style="font-size: 1rem; color: #22ac38"
                      />
                    </div>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="company_name" label="企业名称">
        </el-table-column>
        <el-table-column prop="province" label="所属地区"> </el-table-column>
        <el-table-column
          label="注册资本"
        >
          <template slot-scope="{ row }">
            <span>{{ row.regist_capi }}万元人民币</span>
          </template>
        </el-table-column>
        <el-table-column prop="econ_kind" label="企业标签"> </el-table-column>
        <el-table-column prop="start_date" label="注册日期"> </el-table-column>
      </el-table>
      <page
        :total="total"
        :current.sync="params.page"
        :size.sync="params.size"
        @change="search"
      />
    </div>
    <el-dialog title="电话标签" :visible.sync="phoneDialogVisible" width="30%">
      <el-form
        :model="phoneForm"
        inline
        :rules="phoneFormRules"
        ref="phoneForm"
        label-position="left"
      >
        <el-form-item
          label="联系方式反馈"
          :label-width="labelWidth"
          prop="contact_details"
          class="phone-dialog-visible-form-item"
        >
          <el-radio-group v-model="phoneForm.contact_details" size="small">
            <template v-for="(item, index) in contactDetailData">
              <el-radio :key="index" :label="item.key" border>
                {{ item.name }}
              </el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="意向类别反馈"
          :label-width="labelWidth"
          prop="intent_categorys"
          class="phone-dialog-visible-form-item"
        >
          <el-radio-group v-model="phoneForm.intent_categorys" size="small">
            <template v-for="(item, index) in intentCategoryData">
              <el-radio :key="index" :label="item.key" border>{{
                item.name
              }}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="线索质量反馈"
          :label-width="labelWidth"
          prop="clue_feedbacks"
          class="phone-dialog-visible-form-item"
        >
          <el-radio-group v-model="phoneForm.clue_feedbacks" size="small">
            <template v-for="(item, index) in clueFeedbackData">
              <el-radio :key="index" :label="item.key" border>{{
                item.name
              }}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setMarks">确 定</el-button>
        <el-button @click="phoneDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="预约标签"
      :visible.sync="reservationDialogVisible"
      width="30%"
      center
    >
      <el-form
        :model="reservationForm"
        inline
        :rules="reservationFormRules"
        ref="reservationForm"
        label-position="left"
      >
        <el-form-item label="当前预约" :label-width="labelWidth">
          <div
            v-if="appointments.length < 1"
            style="font-size: 0.8rem; color: #999"
          >
            无预约
          </div>
          <div v-else>
            <el-table
              :data="appointments"
              height="150"
              style="min-width: 26rem"
            >
              <el-table-column prop="appointment" label="预约信息" />
              <el-table-column prop="appointment_date" label="预约日期" />
            </el-table>
          </div>
        </el-form-item>
        <el-form-item
          label="新增预约"
          :label-width="labelWidth"
          prop="appointment_date"
        >
          <el-date-picker
            v-model="reservationForm.appointment_date"
            type="datetime"
            placeholder="选择日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="appointment">
          <el-input
            type="textarea"
            v-model="reservationForm.appointment"
            placeholder="编辑预约信息"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setAppointment">预 约</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchRegion, fetchIndustry } from "@/api";
import inputNumber from "@/components/form/section/inputNumber";
import Page from "@/components/list/page";
import {
  index,
  setUnUserStoreComp,
  setMarks,
  setAppointment,
  getAppointments,
} from "@/api/collection/collection";

export default {
  components: {
    inputNumber,
    Page,
  },
  data() {
    const contactDetailData = this.$config("index", 'contactDetailData')
    const intentCategoryData = this.$config("index", 'intentCategoryData')
    const clueFeedbackData = this.$config("index", 'clueFeedbackData')

    return {
      labelWidth: "100%",
      multipleSelection: [],
      numberOfEnterpise: "0",
      industryList: [],
      total: 100,
      regions: [],
      tableData: [],
      loading: true,
      condition: {
        company_name: "",
        province_code: [],
        econ_kind_code: [],
        regist_capi: [1, 99],
        start_date: []
      },
      params: {
        page: 1,
        size: 10,
        company_name: "",
        province_code: [],
        econ_kind_code: [],
        regist_capi: [1, 99],
        start_date: []
      },
      // 电话标签
      phoneDialogVisible: false,
      phoneForm: {
        id: 0,
        contact_details: '',
        intent_categorys: '',
        clue_feedbacks: '',
      },
      phoneFormRules: {
        contact_details: [
          { type: "string", message: "验证", trigger: "change" },
        ],
        intent_categorys: [
          { type: "string", message: "验证", trigger: "change" },
        ],
        clue_feedbacks: [
          { type: "string", message: "验证", trigger: "change" },
        ],
      },
      contactDetailData,
      intentCategoryData,
      clueFeedbackData,
      // 预约标签
      reservationDialogVisible: false,
      appointments: [],
      reservationForm: {
        id: 0,
        appointment_date: "",
        appointment: "",
      },
      reservationFormRules: {
        appointments: [{ type: "string", message: "验证", trigger: "change" }],
        appointment_date: [
          { type: "date", message: "验证", trigger: "change" },
        ],
        appointment: [{ type: "string", message: "验证", trigger: "change" }],
      }
    };
  },
  created() {
    this.getRegion();
    this.fetchIndustry();
    this.search();
  },
  methods: {
    getRegion() {
      fetchRegion((res) => {
        if (res.code === 200) {
          this.regions = res.data;
        }
      });
    },
    subSearch() {
      this.params.page = 1
      Object.assign(this.params, this.condition)
      this.search()
    },
    search() {
      this.loading = true;
      index(this.params, (response) => {
        this.loading = false;
        if (response.code === 200) {
          this.tableData = response.data.data;
          this.total = response.data.total;
          this.numberOfEnterpise = response.data.total;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    alertPhoneDialogVisible(row) {
      this.phoneForm.id = row.id;
      this.phoneDialogVisible = true;
    },
    alertReservationDialogVisible(row) {
      this.reservationForm.id = row.id;
      this.reservationDialogVisible = true;
      // 查询当前预约
      this.getAppointments(row.id);
    },
    handleChange(value) {
      // this.condition.province = value[0];
      // this.condition.city = value[1];
      // this.condition.area = value[2];
    },
    fetchIndustry() {
      fetchIndustry(
        (res) => {
          if (res.code == 200) {
            this.industryList = res.data;
          }
        },
        (err) => {}
      );
    },
    handleSetUserStoreComp() {
      var output = [];
      for (var i = 0; i < this.multipleSelection.length; ++i)
        output.push(this.multipleSelection[i].id);

      setUnUserStoreComp({ id: output.join(",") }, (response) => {
        if (response.code === 200) {
          this.$message({
            message: "取消收藏成功",
            type: "success",
          });
          this.search();
        }
      });
    },
    setMarks() {
      this.phoneDialogVisible = false;
      let marks =  []
      if (this.phoneForm.contact_details) marks.push(this.phoneForm.contact_details)
      if (this.phoneForm.intent_categorys) marks.push(this.phoneForm.intent_categorys)
      if (this.phoneForm.clue_feedbacks) marks.push(this.phoneForm.clue_feedbacks)
      marks = marks.join(",")

      setMarks({ id: this.phoneForm.id, marks: marks }, (response) => {
        if (response.code === 200) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.resetForm("phoneForm");
        }
      });

      this.search()
    },
    setAppointment() {
      this.reservationDialogVisible = false;
      setAppointment(this.reservationForm, (response) => {
        if (response.code === 200) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.resetForm("reservationForm");
        }
      });

      this.search()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getAppointments(id) {
      getAppointments({ id: id }, (response) => {
        if (response.code === 200) {
          this.appointments = response.data;
        }
      });
    },
    resetCondition() {
      const resetCondition = {
        company_name: "",
        province_code: "",
        econ_kind_code: "",
        regist_capi: [1, 2],
        start_date: []
      }
      Object.assign(this.condition, resetCondition)
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/collection/index";
</style>

<style>
.el-table thead {
  color: #2f3133;
}
.el-table th {
  background-color: #f5f7f9;
}
</style>
<style lang="scss">
.phone-cell {
  .el-icon-arrow-right {
    &::before {
      content: " " !important;
    }
  }
}
.el-table__body-wrapper .phone-cell {
  background: url(../../../assets/img/phone.png) no-repeat center;
  background-size: 1.4rem;
}
</style>